<template>
	<view class="th-cell-box">
		<view v-if="showLtop" class="line-top"></view>
		<view class="title" v-if="titleShow" style="color: #999;">{{ titleShow }}</view>
		<view class="title" v-else>{{ title }}</view>
		<view v-if="required" class="star">*</view>
		<view class="right-content">
			<view class="input-box" :class="overflow ? 'text-zh2' : ''" v-if="disabled && loge">{{ contentValue }}</view>
			<u-input v-if="!loge" :adfouc="false" class="input-box" v-model="contentValue" :disabled="disabled && !loge" :placeholder="placeHolder" :placeholderStyle="placeholderStyle" :type="type" @click="contentTap"></u-input>
			<u-icon v-if="showArrow" name="arrow-right" color="#999999" @click="contentTap"></u-icon>
			<view @click="contentTap"><u-icon v-if="addLogo" name="plus-circle" color="deepskyblue" size="45"></u-icon></view>
		</view>
		<view v-if="showLbto" class="line"></view>
	</view>
</template>

<script>
export default {
	name: 'th-cell',
	data() {
		return {
			contentValue: '',
			placeholderStyle: 'fontSize: 32rpx;fontWeight: 500;color: #999999'
		};
	},
	props: {
		title: {
			type: String,
			default: '默认标题'
		},
		titleShow: {
			type: String,
			default: ''
		},
		placeHolder: {
			type: String,
			default: '请输入'
		},
		disabled: {
			type: Boolean,
			default: false
		},
		loge: {
			type: Boolean,
			default: false
		},
		showArrow: {
			type: Boolean,
			default: false
		},
		showLtop: {
			type: Boolean,
			default: false
		},
		showLbto: {
			type: Boolean,
			default: true
		},
		addLogo: {
			type: Boolean,
			default: false
		},
		required: {
			type: Boolean,
			default: true
		},
		overflow: {
			type: Boolean,
			default: true
		},
		value: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text' //number | idcard | digit | password
		}
	},
	watch: {
		value: {
			handler(newValue, oldValue) {
				this.contentValue = newValue;
			},
			immediate: true
		}
	},
	methods: {
		contentTap() {
			console.log('contentTap');
			this.$emit('contentTap');
		},
		getData() {
			return this.contentValue == undefined ? '' : this.contentValue;
		}
	}
};
</script>

<style scoped lang="scss">
.th-cell-box {
	width: 100%;
	min-height: 120rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-left: 46rpx;
	padding-right: 56rpx;
	background: #fff;
	position: relative;

	.title {
		font-size: 32rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333;
		line-height: 44rpx;
	}

	.star {
		font-size: 32rpx;
		color: red;
	}

	.right-content {
		flex: 1;
		display: flex;
		align-items: center;

		.input-box {
			flex: 1;
			margin-right: 10rpx;
			margin-left: 15rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333;
			line-height: 44rpx;
			text-align: right;
		}

		.text-zh2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.line {
		position: absolute;
		bottom: 0;
		left: 46rpx;
		right: 0;
		height: 2rpx;
		background: #f6f7fb;
	}

	.line-top {
		position: absolute;
		top: 0;
		left: 46rpx;
		right: 0;
		height: 2rpx;
		background: #f6f7fb;
	}
}
</style>
